<template>
  <div class="inputArea">
    <input placeholder="请输入任务" maxlength="20" @keyup.enter="handleAdd" v-model.trim="taskName" type="text">
    <button @click="handleAdd">添加任务</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      taskName:""
    }
  },
  methods: {
    handleAdd(){
      if (!this.taskName) {
        return
      }
      this.$emit("AddTask",this.taskName)
      this.taskName=''
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.inputArea{
  position: relative;
 
  width: 100%;
  height: 8%;
}
input,button{
  border-radius: 5px;
  border: 1px solid rgb(203,98,89);
}
 input{
  font-size: 1em;
  padding: 0px 15px;
  outline: none;
  width: 100%;
  height: 100%;
  box-sizing:border-box;
 }
 button{
  cursor: pointer;
  background-color: rgb(203,98,89);
  border-radius: 0 5px 5px 0px;
  color: white;
  position: absolute;
  width: 20%;
  height: 100%;
  right: 0;
  top: 0;
 }
</style>
